<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">

      <view class="tabListWrap">
        <view class="tabList">
          <view
             class="tabLi"
             v-for="(n,i) in tabList"
             :key="i"
             @click="tabListActiveIndexChange(n,i)"
             :class="i === tabListActiveIndex && 'tabLiActive'"
          >
            {{ n.label }}
          </view>
        </view>
      </view>
    </view>
    <view class="inner">
      <view class="dlTopTabList">
        <view
           class="tabLi"
           v-for="(n,i) in contentTabList"
           :key="i"
           @click="contentTabListActiveIndexChange(n,i)"
           :class="i === contentTabListActiveIndex && 'tabLiActive'"
        >
          <view class="tabLi1" :class="{
            tabLi1A:n.perView>=0,
            tabLi1B:n.perView>=50,
            tabLi1C:n.perView>=100,
          }">
            <view class="tabLi1Inner"
               :style="{transform:`translateY(${100 - n.perView}%)`}"
            ></view>
          </view>
          <view class="tabLi2">{{ n.label }}</view>
        </view>
      </view>
      <view class="dlTabList">
        <view
           class="tabLi"
           v-for="(n,i) in contentTabList"
           :key="i"
           @click="contentTabListActiveIndexChange(n,i)"
           :class="i === contentTabListActiveIndex && 'tabLiActive'"
        >
          <view class="tabLi1">{{ n.label }}</view>
          <view class="tabLi2">123124</view>
        </view>
      </view>
      <view class="tabContent" v-for="(n,i) in list" :key="i" @click="">
        <view class="ddTitle">灌装实时检测</view>
        <view class="ddTitle2">
          <view class="ddTitle21">浊度</view>
          <view class="ddTitle22">(NTU)</view>
        </view>
        <view class="ddInfo">
          <view class="ddInfo1"></view>
          <view class="ddInfo2"></view>
          <view class="ddInfo3"></view>
          <view class="ddInfoText1"></view>
          <view class="ddInfoText2">18</view>
        </view>
        <view class="ddInfoText">
          <view class="ddInfoN ddInfo1">0</view>
          <view class="ddInfoN ddInfo2">正常</view>
          <view class="ddInfoN ddInfo3">1</view>
        </view>
      </view>
      <view class="info2">
        <view class="info2Li info2Li1">
          <view class="info2LiTitle">最佳使用时间</view>
          <view class="info2LiContent">72小时内</view>
        </view>
        <view class="info2Li info2Li2">
          <view class="info2LiTitle">保质期</view>
          <view class="info2LiContent">120小时内</view>
        </view>
      </view>
      <view class="info3">
        <view class="info3Li">
          <view class="info3LiTitle">最佳使用时间</view>
          <view class="info3LiContent">72小时内</view>
        </view>
        <view class="info3Li">
          <view class="info3LiTitle">保质期</view>
          <view class="info3LiContent">120小时内</view>
        </view>
      </view>

    </view>
    <view class="innerNext">
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [
        {},
        {},
        {},
        {},
      ],
      tabListActiveIndex: 0,
      tabList: [
        { label: '茶吧机' },
        { label: '智热机' },
        { label: '双舱智水座' },
      ],
      contentTabListActiveIndex: 0,
      contentTabList: [
        { label: 'A舱', perView: 80 },
        { label: 'B舱', perView: 10 },
      ],
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    tabListActiveIndexChange(n, i){
      this.tabListActiveIndex = i
    },
    contentTabListActiveIndexChange(n, i){
      this.contentTabListActiveIndex = i
    },
  },
}
</script>
<style lang="scss">


page {
  background-color: #F7F9FB;
}

.innerPre {

}

.inner {
  padding: 24px;
}

.innerNext {

}

.dlTopTabList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  .tabLi {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;

    width: 339px;
    height: 318px;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
    .tabLi1 {
      width: 106px;
      height: 191px;

      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;

      position: relative;
      overflow: hidden;

      &.tabLi1A {
        background-image: url(#{$bgPath}/icon_dd_11.png);
        .tabLi1Inner {
          background-image: url(#{$bgPath}/icon_dd_12.png);
        }
      }
      &.tabLi1B {
        background-image: url(#{$bgPath}/icon_dd_13.png);
        .tabLi1Inner {
          background-image: url(#{$bgPath}/icon_dd_14.png);
        }
      }
      &.tabLi1C {
        background-image: url(#{$bgPath}/icon_dd_15.png);
        .tabLi1Inner {
          background-image: url(#{$bgPath}/icon_dd_16.png);
        }
      }

      .tabLi1Inner {
        position: absolute;

        width: 104px;
        height: 152px;

        bottom: 0;
        left: 0;

        transform: translateY(0%);

        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
      }
    }
    .tabLi2 {

    }
  }
  .tabLiActive {
    background: #FFFFFF;

  }
}

.dlTabList {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  .tabLi {
    width: 50%;
    white-space: nowrap;
    padding: 20px 0;
    border-bottom: 4px solid transparent;
    color: #556675;

    display: flex;
    justify-content: center;
    align-items: center;

    .tabLi1 {
      font-size: 32px;
      font-weight: 500;
      color: #00000065;
      line-height: 48px;
    }
    .tabLi2 {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      padding: 5px 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 24px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.25);
      line-height: 36px;

      margin-left: 20px;
    }
  }
  .tabLiActive {
    background-color: white;
    .tabLi1 {
      color: #000000;
    }
  }
}

.tabContent {
  background-color: white;
  padding: 24px;
  .ddTitle {
    font-size: 32px;
    font-weight: bolder;
    color: #000000;
    line-height: 44px;
    padding: 32px 0;
    padding-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ddTitle2 {
    display: flex;
    align-items: center;
    .ddTitle21 {
      font-size: 28px;
      font-family: MiSans-Regular, MiSans;
      font-weight: 400;
      color: #000000;
      line-height: 44px;
    }
    .ddTitle22 {
      font-size: 24px;
      font-family: MiSans-Regular, MiSans;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 36px;
    }
  }


  .ddInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .ddInfo1 {
      width: 30%;
      height: 12px;
      background: linear-gradient(270deg, #89BEFF 0%, #E7F6FF 100%);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
    }
    .ddInfo2 {
      width: 30%;
      height: 12px;
      background: linear-gradient(270deg, #68ACFF 0%, #8FC1FF 100%);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
    }
    .ddInfo3 {
      width: 30%;
      height: 12px;
      background: linear-gradient(270deg, #177FFF 0%, rgba(23, 127, 255, 0.5) 100%);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
    }
    .ddInfoText1 {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 24px;
      background: #177FFF;
      opacity: 1;
      border: 4px solid #FFFFFF;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    .ddInfoText2 {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 68px;
      height: 36px;
      //box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.2);


      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      border: 4px solid #FFFFFF;
      transform: translate(-50%, -60px);

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 24px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.6499999761581421);
      line-height: 36px;
    }
  }


  .ddInfoText {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ddInfoN {
      font-size: 24px;
      font-family: -328080,;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.5);
      line-height: 36px;

      display: flex;
      justify-content: center;
      align-items: center;
    }
    .ddInfo1 {
      width: 30%;
    }
    .ddInfo2 {
      width: 30%;
    }
    .ddInfo3 {
      width: 30%;
    }
  }

}

.info2 {

  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info2Li {
    width: 315px;
    height: 200px;
    background: rgba(23, 127, 255, 0.05);

    background-image: url(#{$bgPath}/icon_dd_01.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 160px 160px;


    border-radius: 16px 16px 16px 16px;
    opacity: 0.95;

    padding: 24px;
    .info2LiTitle {
      font-size: 24px;
      font-weight: 400;
      color: #177FFF;
      line-height: 36px;
    }
    .info2LiContent {
      font-size: 40px;
      font-weight: 600;
      color: #177FFF;
      line-height: 44px;
      margin-top: 20px;
    }
  }

  .info2Li1 {

  }
  .info2Li2 {

  }
}

.info3 {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info3Li {
    width: 315px;
    height: 136px;
    background: rgba(23, 127, 255, 0.05);
    border-radius: 16px 16px 16px 16px;
    opacity: 0.95;
    padding: 24px;
    .info3LiTitle {
      font-size: 24px;
      font-weight: 400;
      color: #177FFF;
      line-height: 36px;
    }
    .info3LiContent {
      font-size: 24px;
      font-weight: 600;
      color: #177FFF;
      line-height: 44px;
      margin-top: 20px;
    }
  }
}

</style>
